import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { DNavBar, DAtInpute } from '@/components'
import http from '@/api'
import { AtForm, AtInput, AtButton } from 'taro-ui'
import sdk from '@/common/sdk'
import './editname.scss'

export default class EditnameBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            newName: ""
        }
    }

    componentWillMount() {
        const { name = '' } = this.$router.params
        this.setState({
            newName: name
        })
    }

    componentDidShow() {
        sdk.setTitleInfo('修改姓名')
    }

    onChangeName(value) {
        this.setState({
            newName: value
        })
    }

    onSubmit() {
        let { newName } = this.state
        if (!newName) {
            return Taro.showToast({
                title: "请输入修改的姓名!",
                icon: 'none'
            })
        }
        http.setUserName({ newName }).then(res => {
            if (!res) {
                return
            }
            Taro.showToast({
                title: "已修改姓名",
                duration: 800,
                mask: true
            }).then(() => {
                setTimeout(() => {
                    Taro.navigateBack({ delta: 1 })
                }, 1000)
            })
        })
    }

    render() {
        const {
            newName
        } = this.state
        return (
            <View className='b_editname'>
                <DNavBar title='修改姓名'></DNavBar>
                <View className='b_editname__box'>
                    <View className='b_editname__form '>
                        <AtForm>
                            <DAtInpute value={newName} maxLength={12} onChange={this.onChangeName.bind(this)} title='个人姓名' placeholder='请输入个人姓名'></DAtInpute>
                        </AtForm>
                    </View>
                    <View className='b_editname__footer'>
                        <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>保存</AtButton>
                    </View>
                </View>
            </View>
        )
    }
}